<template>
  <div class="flex flex-col gap-8px items-center">
    <div>
      <span class="mr-4px text-[#4E5969]">{{ title }}</span>
      <Popover v-if="openPopover">
        <template #content>
          {{ popoverText }}
        </template>
        <QuestionCircleOutlined style="color: #c9cdd4" />
      </Popover>
    </div>
    <div class="font-bold text-24px leading-44px">
      <span class="text-14px"> {{ beforeUnit }}</span>
      {{
        beforeUnit
          ? number.toLocaleString('zh-CN', {
              minimumFractionDigits: 2,
              maximumFractionDigits: 2,
            })
          : number
      }}{{ unit }}
    </div>
    <div v-if="dayNumber !== undefined" class="text-[#86909C]">
      今日
      <span :style="{ color: dayNumber >= 0 ? '#00B42A' : '#F53F3F' }">
        <template v-if="dayNumber >= 0">+</template>
        {{
          beforeUnit
            ? dayNumber.toLocaleString('zh-CN', {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2,
              })
            : dayNumber
        }}{{ unit }}
      </span>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { Popover } from 'ant-design-vue';
  import { QuestionCircleOutlined } from '@ant-design/icons-vue';
  const props = defineProps({
    title: { type: String, default: '' },
    number: { type: Number, default: 0 },
    dayNumber: { type: Number, default: undefined },
    openPopover: { type: Boolean, default: false },
    popoverText: { type: String, default: '' },
    unit: { type: String, default: '' },
    beforeUnit: { type: String, default: '' },
  });
</script>
